<template>
  <div>
    <a-spin tip="Loading..." :spinning="spin">
      <div style="background: #fff; padding: 20px; box-sizing: border-box">
        <a-row>
          <a-col :span="24">
            <div style="margin: 5px 0 15px 0;display: flex;align-items: center;justify-content: space-between">
              <div>
                <img style="margin-left: -20px;margin-bottom: 6px" src="../../../assets/icon/icon-12.png">
                <span
                  style="font-weight: bold;font-size: 18px;color: #4C537D;margin-left: 5px;margin-top: 6px">1号系统</span>
                <a-radio-group @change="pumpBtn" style="margin-left: 10px" v-model="pumpOne" button-style="solid">
                  <a-radio-button value="0">
                    手动
                  </a-radio-button>
                  <a-radio-button value="1">
                    自动
                  </a-radio-button>
                </a-radio-group>
              </div>
              <div v-show="pumpOne=='1'">
                <a-button @click="pumpCommand(oneZz,'','一号系统自动成功')"
                          style="width: 90px;height: 32px;background: #13CE66;border-radius: 16px;color:#fff;">
                  打开
                </a-button>
                <a-button
                  @click="pumpCommand(pumpOneId,'','一号系统关闭成功')"
                  style="margin-left: 10px;width: 90px;height: 32px;background: #EFEFF0;border-radius: 16px;color:#717171;border: 1px solid #B2B2B2;">
                  关闭
                </a-button>
              </div>
            </div>

            <div class="line"></div>
            <div class="pump">
              <div class="pump-box">
                <div class="pump-top">
                  <div class="pump-title">
                    <img src="../../../assets/icon/icon-14.png"/>
                    真空泵
                  </div>
                  <div>
                    <a-button :disabled="pumpOne=='1'" @click="pumpCommand(oneBtnK,'','一号系统真空泵打开成功')" class="green"
                              style="border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2">
                      打开
                    </a-button>
                    <a-button
                      :disabled="pumpOne=='1'"
                      @click="pumpCommand(oneBtnG,'','一号系统真空泵关闭成功')"
                      class="red"
                      style="margin-left: 5px;border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2;">
                      关闭
                    </a-button>
                  </div>
                </div>
                <div class="pump-bottom">
                  <div class="bottom-box line-right">
                    <div>
                      <img
                        :src="oneYc== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    远程状态
                  </div>
                  <a-divider type="vertical"/>
                  <div class="bottom-box line-right">
                    <div>
                      <img
                        :src="oneYx== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    运行状态
                  </div>
                </div>
              </div>
              <div class="pump-box">
                <div class="pump-top">
                  <div class="pump-title">
                    <img src="../../../assets/icon/icon-10.png"/>
                    前电动阀
                  </div>
                  <div>
                    <a-button
                      :disabled="pumpOne=='1'"
                      @click="pumpCommand(oneBtnQK,'','一号系统前电动阀打开成功')"
                      class="green"
                      style="border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2">
                      打开
                    </a-button>
                    <a-button
                      :disabled="pumpOne=='1'"
                      @click="pumpCommand(oneBtnQg,'','一号系统前电动阀关闭成功')"
                      class="red"
                      style="margin-left: 5px;border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2;">
                      关闭
                    </a-button>
                    <a-button
                      :disabled="pumpOne=='1'"
                      @click="pumpCommand(oneBtnQt,'','一号系统前电动阀停止成功')"
                      class="blue"
                      style="margin-left: 5px;border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2;">
                      停止
                    </a-button>
                  </div>
                </div>
                <div class="pump-bottom">
                  <div class="bottom-box">
                    <div>
                      <img
                        :src="oneQYc== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    远程状态
                  </div>
                  <a-divider type="vertical"/>
                  <div class="bottom-box">
                    <div>
                      <img
                        :src="oneQKdw== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    开到位
                  </div>
                  <a-divider type="vertical"/>
                  <div class="bottom-box">
                    <div>
                      <img
                        :src="oneQGdw== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    关到位
                  </div>

                </div>
              </div>
              <div class="pump-box">
                <div class="pump-top">
                  <div class="pump-title">
                    <img src="../../../assets/icon/icon-9.png"/>
                    水泵
                  </div>
                  <div>
                    <a-button :disabled="pumpOne=='1'" @click="pumpCommand(oneBtnBk,'','一号系统水泵打开成功')" class="green"
                              style="border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2">
                      打开
                    </a-button>
                    <a-button
                      :disabled="pumpOne=='1'"
                      @click="pumpCommand(oneBtnBg,'','一号系统水泵关闭成功')"
                      class="red"
                      style="margin-left: 5px;border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2;">
                      关闭
                    </a-button>
                  </div>
                </div>
                <div class="pump-bottom">
                  <div class="bottom-box line-right">
                    <div>
                      <img
                        :src="oneBYc== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    远程状态
                  </div>
                  <a-divider type="vertical"/>
                  <div class="bottom-box line-right">
                    <div>
                      <img
                        :src="oneBYx== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    运行状态
                  </div>
                  <a-divider type="vertical"/>
                  <div class="bottom-box">
                    <div>
                      <img
                        :src="oneBGz== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    故障状态
                  </div>
                </div>
              </div>
              <div class="pump-box">
                <div class="pump-top">
                  <div class="pump-title">
                    <img src="../../../assets/icon/icon-10.png"/>
                    后电动阀
                  </div>
                  <div>
                    <a-button :disabled="pumpOne=='1'" @click="pumpCommand(oneBtnHk,'','一号系统后电动阀打开成功')" class="green"
                              style="border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2">
                      打开
                    </a-button>
                    <a-button
                      :disabled="pumpOne=='1'"
                      @click="pumpCommand(oneBtnHg,'','一号系统后电动阀关闭成功')"
                      class="red"
                      style="margin-left: 5px;border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2;">
                      关闭
                    </a-button>
                    <a-button
                      :disabled="pumpOne=='1'"
                      @click="pumpCommand(oneBtnHt,'','一号系统后电动阀停止成功')"
                      class="blue"
                      style="margin-left: 5px;border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2;">
                      停止
                    </a-button>
                  </div>
                </div>
                <div class="pump-bottom">
                  <div class="bottom-box line-right">
                    <div>
                      <img
                        :src="oneHYc== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    远程状态
                  </div>
                  <a-divider type="vertical"/>
                  <div class="bottom-box">
                    <div>
                      <img
                        :src="oneHKdw== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    开到位
                  </div>
                  <a-divider type="vertical"/>
                  <div class="bottom-box">
                    <div>
                      <img
                        :src="oneHgdw== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    关到位
                  </div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>

      </div>
      <div style="margin-top:20px;background: #fff; padding: 20px; box-sizing: border-box">
        <a-row>
          <a-col :span="24">
            <div style="margin: 5px 0 15px 0;display: flex;align-items: center;justify-content: space-between">
              <div>
                <img style="margin-left: -20px;margin-bottom: 6px" src="../../../assets/icon/icon-12.png">
                <span
                  style="font-weight: bold;font-size: 18px;color: #4C537D;margin-left: 5px;margin-top: 6px">2号系统</span>
                <a-radio-group style="margin-left: 10px" @change="pumpBtns" v-model="pumpTwo" button-style="solid">
                  <a-radio-button value="0">
                    手动
                  </a-radio-button>
                  <a-radio-button value="1">
                    自动
                  </a-radio-button>
                </a-radio-group>
              </div>
              <div v-show="pumpTwo=='1'">
                <a-button @click="pumpCommand(twoZz,'','二号系统自动成功')"
                          style="width: 90px;height: 32px;background: #13CE66;border-radius: 16px;color:#fff;">
                  打开
                </a-button>
                <a-button
                  @click="pumpCommand(twoZs,'','二号系统关闭成功')"
                  style="margin-left: 10px;width: 90px;height: 32px;background: #EFEFF0;border-radius: 16px;color:#717171;border: 1px solid #B2B2B2;">
                  关闭
                </a-button>
              </div>
            </div>
            <div class="line"></div>
            <div class="pump">
              <div class="pump-box">
                <div class="pump-top">
                  <div class="pump-title">
                    <img src="../../../assets/icon/icon-14.png"/>
                    真空泵
                  </div>
                  <div>
                    <a-button :disabled="pumpTwo=='1'" @click="pumpCommand(twoBtnK,'','二号系统真空泵打开成功')" class="green"
                              style="border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2">
                      打开
                    </a-button>
                    <a-button
                      :disabled="pumpTwo=='1'"
                      @click="pumpCommand(twoBtnG,'','二号系统真空泵关闭成功')"
                      class="red"
                      style="margin-left: 5px;border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2;">
                      关闭
                    </a-button>
                  </div>
                </div>
                <div class="pump-bottom">
                  <div class="bottom-box line-right">
                    <div>
                      <img
                        :src="twoYc== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    远程状态
                  </div>
                  <a-divider type="vertical"/>
                  <div class="bottom-box line-right">
                    <div>
                      <img
                        :src="twoYx== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    运行状态
                  </div>
                </div>
              </div>
              <div class="pump-box">
                <div class="pump-top">
                  <div class="pump-title">
                    <img src="../../../assets/icon/icon-10.png"/>
                    前电动阀
                  </div>
                  <div>
                    <a-button :disabled="pumpTwo=='1'" @click="pumpCommand(twoBtnQK,'','二号系统前电动阀打开成功')" class="green"
                              style="border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2">
                      打开
                    </a-button>
                    <a-button
                      @click="pumpCommand(twoBtnQg,'','二号系统前电动阀关闭成功')"
                      class="red"
                      style="margin-left: 5px;border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2;">
                      关闭
                    </a-button>
                    <a-button
                      :disabled="pumpTwo=='1'"
                      @click="pumpCommand(twoBtnQt,'','二号系统前电动阀停止成功')"
                      class="blue"
                      style="margin-left: 5px;border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2;">
                      停止
                    </a-button>
                  </div>
                </div>
                <div class="pump-bottom">
                  <div class="bottom-box">
                    <div>
                      <img
                        :src="twoQYc== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    远程状态
                  </div>
                  <a-divider type="vertical"/>
                  <div class="bottom-box">
                    <div>
                      <img
                        :src="twoQKdw== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    开到位
                  </div>
                  <a-divider type="vertical"/>
                  <div class="bottom-box">
                    <div>
                      <img
                        :src="twoQGdw== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    关到位
                  </div>
                </div>
              </div>
              <div class="pump-box">
                <div class="pump-top">
                  <div class="pump-title">
                    <img src="../../../assets/icon/icon-9.png"/>
                    水泵
                  </div>
                  <div>
                    <a-button :disabled="pumpTwo=='1'" @click="pumpCommand(twoBtnBk,'','二号系统水泵打开成功')" class="green"
                              style="border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2">
                      打开
                    </a-button>
                    <a-button
                      :disabled="pumpTwo=='1'"
                      @click="pumpCommand(twoBtnBg,'','二号系统水泵关闭成功')"
                      class="red"
                      style="margin-left: 5px;border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2;">
                      关闭
                    </a-button>
                  </div>
                </div>
                <div class="pump-bottom">
                  <div class="bottom-box line-right">
                    <div>
                      <img
                        :src="twoBYc== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    远程状态
                  </div>
                  <a-divider type="vertical"/>
                  <div class="bottom-box line-right">
                    <div>
                      <img
                        :src="twoBYx== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    运行状态
                  </div>
                  <a-divider type="vertical"/>
                  <div class="bottom-box">
                    <div>
                      <img
                        :src="twoBGz== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    故障状态
                  </div>
                </div>
              </div>
              <div class="pump-box">
                <div class="pump-top">
                  <div class="pump-title">
                    <img src="../../../assets/icon/icon-10.png"/>
                    后电动阀
                  </div>
                  <div>
                    <a-button :disabled="pumpTwo=='1'" @click="pumpCommand(twoBtnHk,'','二号系统后电动阀打开成功')" class="green"
                              style="border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2">
                      打开
                    </a-button>
                    <a-button
                      :disabled="pumpTwo=='1'"
                      @click="pumpCommand(twoBtnHg,'','二号系统后电动阀关闭成功')"
                      class="red"
                      style="margin-left: 5px;border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2;">
                      关闭
                    </a-button>
                    <a-button
                      :disabled="pumpTwo=='1'"
                      @click="pumpCommand(twoBtnHt,'','二号系统后电动阀停止成功')"
                      class="blue"
                      style="margin-left: 5px;border-radius: 15px;background-color: #F4F6F9;color: #717171;border-color: #B2B2B2;">
                      停止
                    </a-button>
                  </div>
                </div>
                <div class="pump-bottom">
                  <div class="bottom-box line-right">
                    <div>
                      <img
                        :src="twoHYc== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    远程状态
                  </div>
                  <a-divider type="vertical"/>
                  <div class="bottom-box">
                    <div>
                      <img
                        :src="twoHKdw== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    开到位
                  </div>
                  <a-divider type="vertical"/>
                  <div class="bottom-box">
                    <div>
                      <img
                        :src="twoHgdw== '1' ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png')">
                    </div>
                    关到位
                  </div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-spin>
  </div>
</template>
<script>
import {pumpControl, pumpStatusShow} from '@/api/device'

export default {
  data() {
    return {
      spin: false,
      value: false,
      value2: false,
      value3: false,
      value4: false,
      value5: false,
      value6: false,
      pumpOne: '',
      pumpTwo: '',
      lists: [],
      oneYx: '',
      oneYc: '',
      oneQYc: '',
      oneQKdw: '',
      oneQGdw: '',
      oneBYc: '',
      oneBYx: '',
      oneBGz: '',
      oneHYc: '',
      oneHKdw: '',
      oneHgdw: '',
      twoYx: '',
      twoYc: '',
      twoQYc: '',
      twoQKdw: '',
      twoQGdw: '',
      twoBYc: '',
      twoBYx: '',
      twoBGz: '',
      twoHYc: '',
      twoHKdw: '',
      twoHgdw: '',
      oneBtnK: '',
      oneBtnG: '',
      oneBtnQK: '',
      oneBtnQg: '',
      oneBtnQt: '',
      oneBtnBk: '',
      oneBtnBg: '',
      oneBtnHk: '',
      oneBtnHg: '',
      oneBtnHt: '',
      twoBtnK: '',
      twoBtnG: '',
      twoBtnQK: '',
      twoBtnQg: '',
      twoBtnQt: '',
      twoBtnBk: '',
      twoBtnBg: '',
      twoBtnHk: '',
      twoBtnHg: '',
      twoBtnHt: '',
      oneZs: '',
      oneZz: '',
      twoZs: '',
      twoZz: '',
      pumpOnes: '',
      pumpTwos: '',
      pumpOneId:'',
      pumpTwoId:'',
      timer: null,
    };
  },
  mounted() {
    this.dataList()
    // this.timer = setInterval(this.get, 1000);
  },
  // 清除定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    // 获取数据每一秒
    get() {
      this.dataLists()
    },
    pumpBtn(val) {
      this.pumpCommand(this.pumpOneId, val.target.value, '切换成功')
    },
    pumpBtns(val) {
      this.pumpCommand(this.pumpTwoId, val.target.value, '切换成功')
    },
    pumpCommand(deviceId, flag, message) {
      console.log(deviceId, flag, message)
      this.spin = true
      pumpControl(deviceId, flag).then(res => {
        console.log(res)
        this.$notification['success']({
          message: res.message,
          description: message,
          duration: 8
        });

        this.spin = false
      }).catch(err => {
        this.spin = false
      })
    },
    dataLists() {
      pumpStatusShow().then(res => {
        console.log(res)
        this.pumpOne = res.result[1].fabrDeviceZdOne.deviceValue
        this.pumpTwo = res.result[3].fabrDeviceZdOne.deviceValue
        this.pumpOneId = res.result[1].fabrDeviceZdOne.id
        this.pumpTwoId = res.result[3].fabrDeviceZdOne.id
        let data = res.result[0]
        let datas = res.result[2]
        this.oneBtnK = data.frontOne[0].id
        this.oneBtnG = data.frontOne[1].id
        this.oneYc = data.frontOne[3].deviceValue
        this.oneYx = data.frontOne[4].deviceValue
        this.oneBtnQK = data.vacuumPumpOne[0].id

        this.oneBtnQg = data.vacuumPumpOne[1].id
        this.oneBtnQt = data.vacuumPumpOne[2].id
        this.oneQYc = data.vacuumPumpOne[3].deviceValue
        this.oneQKdw = data.vacuumPumpOne[4].deviceValue
        this.oneQGdw = data.vacuumPumpOne[5].deviceValue
        this.oneBtnBk = data.waterOne[0].id
        this.oneBtnBg = data.waterOne[1].id
        this.oneBYc = data.waterOne[2].deviceValue
        this.oneBYx = data.waterOne[3].deviceValue
        this.oneBGz = data.waterOne[4].deviceValue
        this.oneBtnHk = data.afterPumpOne[0].id
        this.oneBtnHg = data.afterPumpOne[1].id
        this.oneBtnHt = data.afterPumpOne[2].id
        this.oneHYc = data.afterPumpOne[3].deviceValue
        this.oneHKdw = data.afterPumpOne[4].deviceValue
        this.oneHgdw = data.afterPumpOne[5].deviceValue
        this.twoBtnK = datas.frontOne[0].id
        this.twoBtnG = datas.frontOne[1].id
        this.twoYc = datas.frontOne[2].deviceValue
        this.twoYx = datas.frontOne[3].deviceValue
        this.twoBtnQK = datas.vacuumPumpOne[0].id
        this.twoBtnQg = datas.vacuumPumpOne[1].id
        this.twoBtnQt = datas.vacuumPumpOne[2].id
        this.twoQYc = datas.vacuumPumpOne[3].deviceValue
        this.twoQKdw = datas.vacuumPumpOne[4].deviceValue
        this.twoQGdw = datas.vacuumPumpOne[5].deviceValue
        this.twoBtnBk = datas.waterOne[0].id
        this.twoBtnBg = datas.waterOne[1].id
        this.twoBYc = datas.waterOne[2].deviceValue
        this.twoBYx = datas.waterOne[3].deviceValue
        this.twoBGz = datas.waterOne[4].deviceValue
        this.twoBtnHk = datas.afterPumpOne[0].id
        this.twoBtnHg = datas.afterPumpOne[1].id
        this.twoBtnHt = datas.afterPumpOne[2].id
        this.twoHYc = datas.afterPumpOne[3].deviceValue
        this.twoHKdw = datas.afterPumpOne[4].deviceValue
        this.twoHgdw = datas.afterPumpOne[5].deviceValue
      }).catch(err => {
        this.spin = false
      })
    },
    dataList() {
      this.spin = true
      pumpStatusShow().then(res => {
        console.log(res)
        this.pumpOne = res.result[1].fabrDeviceZdOne.deviceValue
        this.pumpTwo = res.result[3].fabrDeviceZdOne.deviceValue
        let data = res.result[0]
        let datas = res.result[2]
        this.oneBtnK = data.frontOne[0].id
        this.oneBtnG = data.frontOne[1].id
        this.oneYc = data.frontOne[2].deviceValue
        this.oneYx = data.frontOne[3].deviceValue
        this.oneBtnQK = data.vacuumPumpOne[0].id

        this.oneBtnQg = data.vacuumPumpOne[1].id
        this.oneBtnQt = data.vacuumPumpOne[2].id
        this.oneQYc = data.vacuumPumpOne[3].deviceValue
        this.oneQKdw = data.vacuumPumpOne[4].deviceValue
        this.oneQGdw = data.vacuumPumpOne[5].deviceValue
        this.oneBtnBk = data.waterOne[0].id
        this.oneBtnBg = data.waterOne[1].id
        this.oneBYc = data.waterOne[2].deviceValue
        this.oneBYx = data.waterOne[3].deviceValue
        this.oneBGz = data.waterOne[4].deviceValue
        this.oneBtnHk = data.afterPumpOne[0].id
        this.oneBtnHg = data.afterPumpOne[1].id
        this.oneBtnHt = data.afterPumpOne[2].id
        this.oneHYc = data.afterPumpOne[3].deviceValue
        this.oneHKdw = data.afterPumpOne[4].deviceValue
        this.oneHgdw = data.afterPumpOne[5].deviceValue
        this.twoBtnK = datas.frontOne[0].id
        this.twoBtnG = datas.frontOne[1].id
        this.twoYc = datas.frontOne[2].deviceValue
        this.twoYx = datas.frontOne[3].deviceValue
        this.twoBtnQK = datas.vacuumPumpOne[0].id
        this.twoBtnQg = datas.vacuumPumpOne[1].id
        this.twoBtnQt = datas.vacuumPumpOne[2].id
        this.twoQYc = datas.vacuumPumpOne[3].deviceValue
        this.twoQKdw = datas.vacuumPumpOne[4].deviceValue
        this.twoQGdw = datas.vacuumPumpOne[5].deviceValue
        this.twoBtnBk = datas.waterOne[0].id
        this.twoBtnBg = datas.waterOne[1].id
        this.twoBYc = datas.waterOne[2].deviceValue
        this.twoBYx = datas.waterOne[3].deviceValue
        this.twoBGz = datas.waterOne[4].deviceValue
        this.twoBtnHk = datas.afterPumpOne[0].id
        this.twoBtnHg = datas.afterPumpOne[1].id
        this.twoBtnHt = datas.afterPumpOne[2].id
        this.twoHYc = datas.afterPumpOne[3].deviceValue
        this.twoHKdw = datas.afterPumpOne[4].deviceValue
        this.twoHgdw = datas.afterPumpOne[5].deviceValue
        this.spin = false
      }).catch(err => {
        this.spin = false
      })
    }
  },
};
</script>
<style scoped>
.line {
  width: 100%;
  border-bottom: 1px dashed #ccc;
}

.pump {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}

.pump-box {
  width: 23%;
  height: 200px;
  border: 1px solid #CED4DA;
  box-shadow: 3px 4px 6px 0px rgba(53, 94, 225, 0.09);
}

.pump-top {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: #F4F6F9;
}

.pump-bottom {
  display: flex;
  height: 150px;
  align-items: center;
  justify-content: center;
}

.bottom-box {
  margin: 0 22px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  font-family: Microsoft YaHei;
  color: #687192;
}

.bottom-box div img {
  margin-bottom: 5px;
}

.pump-title {
  color: #4C537D;
  font-weight: bold;
  font-size: 18px;
}

/deep/ .ant-divider-vertical {
  height: 40px;
}

/deep/ .ant-switch-checked {
  background-color: #409EFF;
}

/deep/ .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background-color: #409EFF;
  border-color: #409EFF;
}

/deep/ .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
  background-color: #409EFF;
}

.green {
  width: 66px;
  height: 30px;
  background-color: #13CE66 !important;
  color: #fff !important;
  border-color: #13CE66 !important;
}

.red {
  width: 66px;
  height: 30px;
  background-color: #FA6161 !important;
  color: #fff !important;
  border-color: #FA6161 !important;
}

.blue {
  width: 66px;
  height: 30px;
  background-color: #409EFF !important;
  color: #fff !important;
  border-color: #409EFF !important;
}

/deep/ .ant-btn:hover, .ant-btn:focus {
  border-color: #fff;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before{
  background-color: #409EFF !important;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){
  box-shadow: none;
}
</style>